<template>
  <div class="">
    <!-- 首页轮播图 -->
    <carousel />
    <!-- 搜索框 -->
    <Search />
    <el-row gutter="20px">
      <el-col :span="20">
        <!-- 等级 -->
        <Level @getLevel="getLevel"/>
        <!-- 地区 -->
        <Region @getRegion="getRegion"/>
        <div class="hospital" v-if="hasHospitalArr.length>0">
          <Card
            class="item"
            v-for="(item, index) in hasHospitalArr"
            :key="index"
            :hospitalInfo="item"
          />
        </div>
        <el-empty v-else description="没有医院"/>
          <!-- 底部分页 -->
          <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="true"
            layout="prev, pager, next, jumper,sizes,total"
            :total="total"
            @current-change="currentChange"
            @size-change="sizeChange"
          />
        
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import carousel from "./carousel/index.vue";
import Search from "./search/index.vue";
import Level from "./level/index.vue";
import Region from "./region/index.vue";
import Card from "./card/index.vue";
import { onMounted, ref } from "vue";
// 引入获取医院数据的请求方法
import { reqHospital } from "@/api/home/index";
import type {Content,HospitalResponseData} from '@/api/home/type'
let pageNo = ref<number>(1);
let pageSize = ref<number>(10);
let hostype=ref<string>('')
let districCode=ref<string>('')
// 执行请求
onMounted(() => {
  getHospitalInfo();
});
// 存储医院信息
let hasHospitalArr = ref<Content>([]);
// 总页数
let total = ref<number>(0);
// 获取医院已有的数据
const getHospitalInfo = async () => {
  let result: HospitalResponseData = await reqHospital(pageNo.value, pageSize.value,hostype.value,districCode.value);
  if (result.code == 200) {
    hasHospitalArr.value = result.data.content;
    total.value = result.data.totalElements;
  }
};
// 点击分页器时候的业务，由于vmodel自动获取了page等
const currentChange = () => {
  getHospitalInfo();
};
// 分页器下拉菜单发生变化时触发
const sizeChange = () => {
  getHospitalInfo();

};
// 子组件自定义事件，获取儿子给父组件的参数
const getLevel=(level:string)=>{
  hostype.value=level;
  getHospitalInfo();
}
const getRegion=(region:string)=>{
  districCode.value=region;
  getHospitalInfo();
}
</script>
<style lang="scss" scoped>
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 48%;
    margin: 10px 0;
  }
}
</style>
